<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="form">
        <label class="toggle" for="margin-top">
            <span class="toggle__label">margin-top: auto</span>
            <input type="checkbox" role="switch"  class="toggle__element" id="margin-top" checked />
            <div class="toggle__decor" aria-hidden="true">
                <div class="toggle__thumb"></div>
            </div>
        </label>
    </div>
    <div class="cards">
        <div class="card">
            <figure>
                <img src="../../../assets/images/jpg.jpg" alt="">
            </figure>
            <h3>Bandwidth responsive web design.</h3>
            <p>Twitter stock equity vesting period learning curve launch party pitch innovator series A financing churn rate handshake.</p>
            <button>Read more</button>
        </div>
        <div class="card">
            <figure>
                <img src="../../../assets/images/jpg.jpg" alt="">
            </figure>
            <h3>Social media accelerator.</h3>
            <p contenteditable>Churn rate non-disclosure agreement buyer focus ecosystem iPad.(Please click on me to add content！)</p>
            <button>Read more</button>
        </div>
        <div class="card">
            <figure>
                <img src="../../../assets/images/jpg.jpg" alt="">
            </figure>
            <h3>Marketing iPad angel investor.</h3>
            <p>Funding influencer partner network metrics bandwidth leverage traction buzz virality.</p>
            <button>Read more</button>
        </div>
    </div>

    <div class="tutorials">
        <a href="https://s.juejin.cn/ds/idBn6pYj/" target="_blank">
            <svg t="1696988571607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4422" width="200" height="200"><path d="M924.8 576.64v-115.2c12.8-13.44 13.44-26.88 12.8-34.56-3.2-30.08-36.48-42.24-47.36-46.72-79.36-30.08-226.56-89.6-307.84-122.88-49.28-24.32-65.28-19.84-113.28-0.64-12.8 5.12-224.64 83.84-306.56 117.76-44.8 18.56-51.2 46.08-51.2 61.44 0 25.6 17.92 48.64 50.56 62.08L259.84 537.6v257.28l8.32 8.32c3.84 3.84 91.52 92.16 252.16 92.16 150.4 0 236.16-88.96 240-92.8l7.68-8.32V540.16l36.48-15.36-1.28 52.48-29.44 49.28 88.96 84.48 98.56-85.76-36.48-48.64zM710.4 771.2c-22.4 18.56-88.96 67.2-190.08 67.2-111.36 0-179.84-48.64-202.88-67.2V561.28l144.64 58.88h0.64c46.08 17.28 81.28 16 125.44-3.2l122.24-51.84v206.08z m154.24-138.24l-17.92-16.64 13.44-22.4 2.56-102.4c4.48-14.08-0.64-25.6-8.32-32-7.68-7.04-21.76-11.52-36.48-2.56L565.12 563.84c-30.08 13.44-49.92 14.08-81.92 2.56l-298.88-121.6c-7.68-3.2-12.16-6.4-14.08-8.96 1.92-1.92 6.4-5.12 14.72-8.96 81.92-33.92 302.72-116.48 305.28-117.12h0.64c38.4-15.36 38.4-15.36 67.2-0.64l1.92 0.64c80.64 32.64 226.56 92.16 307.2 122.88v163.2l16 21.12-18.56 16z" p-id="4423"></path></svg>
        </a>

    </div>
</body>
<script src="./index.js"></script>
</html>
